<template>
    <el-container>
        <el-container>
            <el-col :span="4" class="colme">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>病人服务</span>
                        </template>
                        <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">病历详情</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">敬请期待</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">敬请期待</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">敬请期待</span>
                    </el-menu-item>
                </el-menu>
            </el-col>

            <el-main>
                <h1>淮安市第一人民医院病历查询</h1>
                <el-row>
                    <el-col :span="24"><div class="grid-content bg-purple-dark">患者/病历详情</div></el-col>
                </el-row>

                <div>
                    <el-col :span="2">
                        <div class="block">
                            <span>病历查询：</span>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="inputs">
                            <el-input
                                v-model.trim="searchVal"
                                placeholder="请输入病情描述"
                                @keyup.enter.native="getHistory">
                            </el-input>
                        </div>
                    </el-col>
                </div>

                <el-table
                    :data="tableHistoryList==null?tableHistoryList:tableHistoryList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%;"
                    :default-sort = "{prop: 'check_id', order: 'descending'}">
                    <el-table-column>
                        <el-table-column
                            prop="illness_description"
                            label="病情描述"
                            sortable
                            width="200">
                        </el-table-column>
                        <el-table-column
                            prop="check_id"
                            label="检查项目编号"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="check_result"
                            label="检查结果"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="diagnosis_result"
                            label="诊断结果"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="date"
                            label="诊断日期"
                            :formatter="formatDate">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="margin-top:15px;margin-left:350px">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[3, 5, 10]"
                        :page-size="pagesize"
                        layout="prev, pager, next,jumper"
                        :total="tableHistoryList==null?0:tableHistoryList.length">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import axios from 'axios'

export default {
    data() {
      return {
        labelPosition:"top",
        tableHistoryList:[],
        currentPage: 1,
        pagesize: 5,
        account: this.$store.state.currentUser.account,
        form: {
            id:'',
            paccount:'',
            daccount:'',
            illness_description:'',
            check_id:'',
            check_result:'',
            diagnosis_result:'',
            prescription:'',
            medicine_expenses:'',
            dose:'',
            date:'',
            sentry:''
        },
        searchVal:"",
      }
    },
    mounted(){
        this.getHistory();
    },
    computed: {
        searchHistory() {
            var that=this;
            console.log(that.searchVal);
            return this.getHistory();
        }
    },
    methods:{
        handleSizeChange(val) {
            this.pagesize=val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        formatDate(row, column) {
            // 获取单元格数据
            let data = row[column.property];
            if(data == null) {
                return null;
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        getHistory(){
            const that=this;
            if(that.searchVal==""){
                axios.post("http://localhost:8848/history/findHistoryByAccount",{
                    account:that.account,
                })
                .then(response=>{
                    console.log(response);
                    console.log(response.data.code);
                    if(response.data.code==-1){
                        
                        alert("请求失败");
                    }else{
                        that.tableHistoryList=response.data.data;
                    }
                    
            }).catch(function(){})
            }else{
                axios.post("http://localhost:8848/history/searchHistory", {
                illness_description:that.searchVal,
            })
            .then(function (response) {
                console.log(response);
                that.tableHistoryList=response.data.data;
            });
            }
            
            
        }
    }
}
</script>

<style scoped>
.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 800px;
}
.el-main {
    background-color: white;
    color: #333;
    text-align: left;
    /* line-height: 800px; */
}
body > .el-container {
    margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
.el-select {
    padding: 0 0px;
    float: left;
    width: 50%;
}
h1{
    text-align: center;
}
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99CCCC;
}
.grid-content {
    border-radius: 4px;
    line-height: 40px;
    text-align: left;
    text-indent: 1em;
    font-family: 宋体;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.block{
    margin-top: 20px;
    margin-bottom: 40px;
}
.colme{
    background: linear-gradient(to bottom, #99CCCC, white);
    /* background-color:#99CCCC; */
    height:600px;
}
.inputs{
    margin-top: 10px;
    margin-bottom: 40px;
}
</style>